<template>
  <!-- 网易云首页 -->
  <div class="musicBox">
    <!-- 导航栏 -->
    <pcNav ref="son"></pcNav>
    <!-- 子导航栏  -->
    <div class="subnavBox">
      <div class="submenu">
        <ul>
          <li
            :class="{ isactive: index === currents }"
            v-for="(item, index) in subMenus"
            :key="index"
            @click="subMenu(index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 轮播图 -->
    <el-carousel
      :interval="5000"
      type="card"
      height="300px"
      arrow="always"
      trigger="click"
    >
      <el-carousel-item v-for="item in banners" :key="item.imageUrl">
        <img :src="item.imageUrl" class="bannerimg" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 热门推荐 -->
    <div class="hotBox">
      <div class="hotleftBox">
        <div class="hotnav">
          <div class="hotnavleft">
            <span class="hottxt">热门推荐</span>
            <ul>
              <li>
                <span>华语</span>
                <span class="fn">|</span>
              </li>
              <li>
                <span>流行</span>
                <span class="fn">|</span>
              </li>
              <li>
                <span>摇滚</span>
                <span class="fn">|</span>
              </li>
              <li>
                <span>民谣</span>
                <span class="fn">|</span>
              </li>
              <li>
                <span>电子</span>
              </li>
            </ul>
          </div>
          <div class="hotnavright">
            <span style="color: #666">更多</span>
          </div>
        </div>
        <div class="hotListBox">
          <div
            class="hotListBoxlist"
            v-for="item in hotMusics"
            :key="item.name"
          >
            <img :src="item.picUrl" alt="" />
            <span
              ><a href="javascript:;">{{ item.name }}</a></span
            >
            <!-- <div class="playTimeBox"></div> -->
          </div>
        </div>
        <!-- 新碟上架 -->
        <div class="hotnav">
          <div class="hotnavleft">
            <span class="hottxt newdisc">新碟上架</span>
          </div>
          <div class="hotnavright">
            <span style="color: #666">更多</span>
          </div>
        </div>
        <div class="newdiscBox">
          <div
            class="newdiscBoxlist"
            v-for="(item, index) in newdiscBoxlist.slice(0, 5)"
            :key="index"
          >
            <img :src="item.blurPicUrl" alt="" />
            <span class="newdiscBoxlisttxt">{{ item.name }}</span>
            <span
              class="newdiscBoxlistname"
              v-for="(item1, index1) in item.artists"
              :key="index1"
              >{{ item1.name }}</span
            >
          </div>
        </div>
        <!-- 榜单 -->
        <div class="hotnav">
          <div class="hotnavleft">
            <span class="hottxt newdisc">榜单</span>
          </div>
          <div class="hotnavright">
            <span style="color: #666">更多</span>
          </div>
        </div>
        <div class="musiclistBox">
          <div class="musiclistBoxlist">
            <div class="musiclistBoxtitle">
              <img :src="soaringListurl" alt="" />
              <div class="titleMuic">
                <span>飙升榜</span>
              </div>
            </div>
            <div
              class="musicsonglist"
              v-for="(item, index) in soaringList"
              :key="index"
              :class="{
                change_bg: index % 2 == 0,
                shange_bg1: index % 2 == !0,
              }"
            >
              <span :class="{ numcolor: index < 3 }">{{ index + 1 }}</span>
              {{ item.name }}
            </div>
            <div class="lastmusicbox">查看全部></div>
          </div>
          <div class="musiclistBoxlist">
            <div class="musiclistBoxtitle">
              <img :src="newMusicListurl" alt="" />
              <div class="titleMuic">
                <span>新歌榜</span>
              </div>
            </div>
            <div
              class="musicsonglist"
              v-for="(item, index) in newMusicList"
              :key="index"
              :class="{
                change_bg: index % 2 == 0,
                shange_bg1: index % 2 == !0,
              }"
            >
              <span :class="{ numcolor: index < 3 }">{{ index + 1 }}</span>
              {{ item.name }}
            </div>
            <div class="lastmusicbox">查看全部></div>
          </div>
          <div class="musiclistBoxlist">
            <div class="musiclistBoxtitle">
              <img :src="originalListurl" alt="" />
              <div class="titleMuic">
                <span>原创榜</span>
              </div>
            </div>
            <div
              class="musicsonglist"
              v-for="(item, index) in originalList"
              :key="index"
              :class="{
                change_bg: index % 2 == 0,
                shange_bg1: index % 2 == !0,
              }"
            >
              <span :class="{ numcolor: index < 3 }">{{ index + 1 }}</span>
              {{ item.name }}
            </div>
            <div class="lastmusicbox">查看全部></div>
          </div>
        </div>
      </div>
      <div class="hotrightBox">
        <div class="userloginBox">
          <div class="userloginBoxtxt">
            登录网易云音乐，可以享受无限收藏的乐趣，并且无线同步到手机
          </div>
          <button class="userloginBtn">用户登录</button>
        </div>
        <!-- 入驻歌手 -->
        <div class="singerBox">
          <div class="singerboxTitle">
            <span>入驻歌手</span>
            <span>查看全部></span>
          </div>
          <div class="singerlistBox" v-for="item in hotSinger" :key="item.id">
            <div class="singerlistimg">
              <img :src="item.picUrl" alt="" />
            </div>
            <div class="singerlisttitle">
              <span>{{ item.name }}</span>
              <span>流行歌手</span>
            </div>
          </div>
          <!-- 热门主播 -->
          <div class="singerboxTitle hotanchortitle1">
            <span>热门主播</span>
            <span></span>
          </div>
          <div
            class="singerlistBox hotanchorBox"
            v-for="item in hotanchor"
            :key="item.nickName"
          >
            <div class="hotanchorimg">
              <img :src="item.avatarUrl" alt="" />
            </div>
            <div class="hotanchortitle">
              <span>{{ item.nickName }}</span>
              <span>金牌主播、网络达人</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      banners: [],
      hotMusics: [],
      newdiscBoxlist: [],
      soaringList: [],
      soaringListurl: "",
      newMusicList: [],
      newMusicListurl: "",
      originalList: [],
      originalListurl: "",
      hotSinger: [],
      hotanchor: [],
      subMenus: ["推荐", "排行榜", "歌单", "主播电台", "歌手", "新碟上架"],
      currents: 0,
    };
  },
  methods: {
    // 点击变色
    subMenu(index) {
      this.currents = index;
    },
    //获取热门歌曲数据
    getHotmusic() {
      //热门歌曲
      axios({
        url: "https://autumnfish.cn/personalized?limit=8",
        method: "get",
      })
        .then((res) => {
          this.hotMusics = res.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
      //banner
      axios({
        url: "https://autumnfish.cn/banner?type=0",
        method: "post",
      })
        .then((res) => {
          this.banners = res.data.banners;
        })
        .catch((err) => {
          console.log(err);
        });
      //新碟上架
      axios({
        url: "https://autumnfish.cn/album/newest",
        method: "post",
      })
        .then((res) => {
          this.newdiscBoxlist = res.data.albums;
        })
        .catch((err) => {
          console.log(err);
        });
      //榜单3779629  2884035 19723756
      axios({
        url: "https://autumnfish.cn/playlist/detail/dynamic?id=19723756",
        method: "get",
      })
        .then((res) => {
          this.soaringListurl = res.data.playlist.coverImgUrl;
          this.soaringList = res.data.playlist.tracks.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
      axios({
        url: "https://autumnfish.cn/playlist/detail/dynamic?id=3779629",
        method: "get",
      })
        .then((res) => {
          this.newMusicListurl = res.data.playlist.coverImgUrl;
          this.newMusicList = res.data.playlist.tracks.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
      axios({
        url: "https://autumnfish.cn/playlist/detail/dynamic?id=2884035",
        method: "get",
      })
        .then((res) => {
          this.originalListurl = res.data.playlist.coverImgUrl;
          this.originalList = res.data.playlist.tracks.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
      //入驻歌手
      axios({
        url: "https://autumnfish.cn/top/artists?offset=0&limit=5",
        method: "get",
      })
        .then((res) => {
          this.hotSinger = res.data.artists;
        })
        .catch((err) => {
          console.log(err);
        });
      //热门主播
      axios({
        url: "https://autumnfish.cn/dj/toplist/popular?limit=5",
        method: "get",
      })
        .then((res) => {
          this.hotanchor = res.data.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getHotmusic();
    this.$refs.son._data.current = 0;
  },
};
</script>

<style>
@import "../assets/css/index.css";
</style>